<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button id="btn">点击，渲染数据</button>

      <hr />
      <button class="button active">Tab1</button>
      <button class="button">Tab2</button>
      <button class="button">Tab3</button>

      <ul id="box">
        <!-- <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li> -->
      </ul>
    </div>

    <script>
      const buttonEls = document.querySelectorAll(".button");
      console.log(buttonEls);

      buttonEls.forEach((button) => {
        console.log("button", button);

        button.onclick = function () {
          // 1. 移除 .button 的 active 类名
          buttonEls.forEach((btn) => {
            btn.classList.remove("active");
          });

          // 2. 给当前点击的 增加 active 类名
          button.classList.add("active");
        };
      });

      // 数据源
      const list = ["Apple", "Banana", "Orange"];

      // 获取元素的 DOM 对象
      const btnEl = document.getElementById("btn");
      const ulEl = document.getElementById("box");
      // btn 绑定点击事件
      btnEl.onclick = function () {
        // 循环 创建 li 元素
        for (let i = 0; i < list.length; i++) {
          const liEl = document.createElement("li");
          liEl.innerHTML = list[i];

          ulEl.appendChild(liEl);
        }
      };
    </script>
  </body>
</html>
